<h1 mat-dialog-title>Configurator for node {{name}}</h1>

<div class="modal-form-container">
    <div class="content">
        <div class="default-content">
            <mat-card class="matCard">
                <mat-tab-group *ngIf="name">
                    <mat-tab label="Ethernet interfaces">
                        <div class="form-field" *ngFor="let port of portsMappingEthernet">
                            <div class="form-field">{{port.name}}</div><br/><br/>
                        </div>
                        <mat-form-field class="select">
                            <mat-select 
                                placeholder="Ethernet interface" 
                                [ngModelOptions]="{standalone: true}" 
                                [(ngModel)]="ethernetInterface">
                                    <mat-option *ngFor="let type of ethernetInterfaces" [value]="type">
                                        {{type}}
                                    </mat-option>
                            </mat-select>
                        </mat-form-field>
                        <button mat-button class="form-field" (click)="onAddEthernetInterface()">Add</button> 
                    </mat-tab>

                    <mat-tab label="TAP interfaces">
                        <div class="form-field" *ngFor="let port of portsMappingTap">
                            <div class="form-field">{{port.name}}</div><br/><br/>
                        </div>
                        <mat-form-field class="form-field">
                            <input 
                                matInput type="text" 
                                [(ngModel)]="tapInterface" 
                                placeholder="TAP interface">
                        </mat-form-field>
                        <button mat-button class="form-field" (click)="onAddTapInterface()">Add</button> 
                    </mat-tab>

                    <mat-tab label="UDP tunnels">
                        <app-udp-tunnels #udpTunnels [dataSourceUdp]="portsMappingUdp" ></app-udp-tunnels>
                    </mat-tab>

                    <mat-tab label="Miscellaneous">
                        <form [formGroup]="generalSettingsForm">
                            <mat-form-field class="form-field">
                                <input 
                                    matInput type="text" 
                                    [(ngModel)]="node.name"
                                    formControlName="name"
                                    placeholder="Name">
                            </mat-form-field>
                        </form>
                        <mat-form-field class="select">
                            <mat-select 
                                placeholder="Console type" 
                                [(ngModel)]="node.console_type">
                                    <mat-option *ngFor="let type of consoleTypes" [value]="type">
                                        {{type}}
                                    </mat-option>
                            </mat-select>
                        </mat-form-field>
                        <mat-form-field class="form-field">
                            <input 
                                matInput type="text" 
                                [(ngModel)]="node.properties.remote_console_host" 
                                placeholder="Console host">
                        </mat-form-field>
                        <mat-form-field class="form-field">
                            <input 
                                matInput type="text" 
                                [(ngModel)]="node.properties.remote_console_port" 
                                placeholder="Console port">
                        </mat-form-field>
                        <mat-form-field class="form-field">
                            <input 
                                matInput type="text" 
                                [(ngModel)]="node.properties.remote_console_http_path" 
                                placeholder="Console HTTP path">
                        </mat-form-field>
                    </mat-tab>
                </mat-tab-group>
            </mat-card>
        </div>
    </div>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="onCancelClick()" color="accent">Cancel</button>
  <button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
</div>
